<template>
  <div class="PopularityDzs">
    <p class="img"><img :src="xI.url" /></p>
    <van-swipe :loop="false" :width="160">
      <van-swipe-item class="my-swipe" v-for="item in xC" :key="item.id"
        ><div class="message" @click="goDzsDetail(item.id)">
          <div class="message_top">
            <img :src="item.avatar" />
            <div class="service_count">服务{{ item.service_count }}人</div>
          </div>
          <div class="message_con">
            <h6>
              <p v-for="(i, index) in item.mark" :key="index">{{ i }}&nbsp;</p>
            </h6>
            <p class="name">{{ item.name }}</p>
            <div class="introduce">{{ item.desc }}</div>
            <p class="good_rate">
              <van-rate
                v-model="value"
                size="12"
                gutter="2"
                color="#c04572"
              />好评率{{ item.good_rate }}%
            </p>
          </div>
        </div></van-swipe-item
      >
    </van-swipe>
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue";
import { useRouter } from "vue-router";
defineProps(["xI", "xC"]);
const router = useRouter();
let value = ref(5);
const goDzsDetail = (id) => {
  console.log(id);
  router.push({ path: "/DzsDetail", query: { id } });
};
</script>

<style scoped>
.PopularityDzs {
  width: 100%;
  height: 5.9rem;
  padding: 0.6rem 0 0 0.3rem;
  box-sizing: border-box;
}
.PopularityDzs .img {
  width: 100%;
  height: 0.43rem;
  margin-bottom: 0.25rem;
}
.PopularityDzs p img {
  display: block;
  height: 0.43rem;
}
.message {
  width: 2.92rem;
  height: 4.55rem;
  margin-left: 0.16;
  border: 1px solid #efeff0;
  border-radius: 4px;
  box-shadow: 1px 1px 5px 0px #efeff0;
}
.message_top {
  width: 100%;
  height: 2.2rem;
  position: relative;
}
.message img {
  display: block;
  width: 100%;
  height: 2.2rem;
}
.service_count {
  width: 1.15rem;
  height: 0.32rem;
  background-color: #000;
  opacity: 0.6;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 12px;
}
.message h6 {
  height: 0.5rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  font-weight: 100;
}
.message_con {
  padding: 0.18rem;
  box-sizing: border-box;
}
.message_con .name {
  display: flex;
  align-items: center;
  height: 0.35rem;
  font-size: 14px;
}
.introduce {
  height: 1rem;
  font-size: 0.08rem;
  overflow: hidden;
}
.good_rate {
  height: 0.5rem;
  font-size: 0.08rem;
  color: #c04572;
}
</style>
